<template>
	<view class="tabs">

		<view class="tabsView">
			<view v-for="(item,index) in list" :key="index" class="label" @click="tabCHeck(index)"
				:class="active == index ? 'activeStyle' : ''">{{item.name}}
				<view class="bar"></view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted,
		defineEmits,
		defineProps
	} from 'vue';
	const props = defineProps({
		list: {
			type: Array,
			required: true
		}
	});


	const emit = defineEmits(['checkTab', 'handleOk'])
	const active = ref(0)

	const tabCHeck = (index) => {
		active.value = index;
		emit('checkTab', index)
	}
	onMounted(() => {
		// console.log('子组件', active.value)
	})


	// 对外暴露方法
	defineExpose({
		active,
	});
</script>

<style lang="less" scoped>
	.tabs {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		justify-content: space-around;

		.tabsView {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;

			.label {
				padding: 0 10rpx;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;

				.bar {
					width: 100%;
					height: 4rpx;
					border-radius: 99em;
					position: absolute;
					left: 0;
					bottom: -20rpx;
					width: 0;
					transition: .3s;
					opacity: 0;
				}
			}

			.activeStyle {
				color: #303133;

				.bar {
					width: 100% !important;
					opacity: 1 !important;
					background-color: #D5A969;
				}

			}

		}
	}
</style>